import React from 'react';
import { Card, Button } from 'antd-mobile';
import QuantitySelector from './QuantitySelector';

const CartItem = ({ item, onUpdateQuantity, onRemove }) => {
  return (
    <Card className="card" style={{ marginBottom: '15px' }}>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <img 
          src={item.image} 
          alt={item.name} 
          style={{ width: '80px', height: '80px', objectFit: 'cover', marginRight: '15px' }} 
        />
        <div style={{ flex: 1 }}>
          <h3 style={{ marginBottom: '5px' }}>{item.name}</h3>
          <p style={{ color: '#666', marginBottom: '5px' }}>¥{item.price.toFixed(2)}</p>
          
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <QuantitySelector 
              quantity={item.quantity} 
              setQuantity={(newQuantity) => onUpdateQuantity(item.id, newQuantity)}
              max={item.stock}
            />
            <Button 
              size="small" 
              inline 
              type="warning" 
              style={{ marginLeft: '10px' }}
              onClick={() => onRemove(item.id)}
            >
              删除
            </Button>
          </div>
        </div>
      </div>
    </Card>
  );
};

export default CartItem;